<template>
  <view>
    <!-- 轮播 uni-app的组件-->
    <swiper
      ndicator-dots="true"
      autoplay="false"
      interval="5000"
    >
      <swiper-item
        v-for="(item,index) in imgList"
        :key="index"
      >
        <image
          :src="item"
          mode=""
        ></image>
      </swiper-item>
    </swiper>
    <view class="start">
      <view
        class="btn"
        @tap="ToProject"
      >开始预约</view>
      <view
        class="btn"
        @tap="ToProcess"
      >预约流程</view>
    </view>

  </view>
</template>

<script>
export default {
  data () {
    return {
      title: '您好！',
      imgList: [
        '/static/images/order-images/show-1.jpg',
        '/static/images/order-images/show-2.jpg',
        '/static/images/order-images/show-3.jpg'
      ]
    }
  },
  onLoad () {

  },
  methods: {
    ToProject () {
      uni.$u.route({
        url: 'pages/project/add'
      })
    },
    ToProcess () {
      uni.$u.route({
        url: 'pages/index/process',
      })
    }
  }
}
</script>

<style>
page {
  background-color: rgb(247, 247, 247);
}

swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 50rpx;
}

swiper image {
  width: 100%;
  height: 400rpx;
}

.start {
  display: flex;
  justify-content: space-around;
  margin-top: 7em;
}

.start .btn {
  display: inline-block;
  width: 8rem;
  height: 6rem;
  line-height: 6rem;
  background: rgb(18, 150, 219);
  text-align: center;
  color: #fff;
  font-size: 1.5em;
}
</style>
